<template>
  <div v-loading="loading">
    <div>
      <el-input
        v-model="filterText"
        style="width: calc(100% - 20px);margin: 10px;"
        :maxlength="30"
        clearable
        size="small"
        :placeholder="$t('项目名称')"
      >
        <template #append>
          <el-button size="small" icon="el-icon-search" @click="init" />
        </template>
      </el-input>
      <div>
        <el-menu
          v-if="dealList.length > 0"
          ref="asideMenu"
          v-infinite-scroll="load"
          :unique-opened="true"
          class="folder-menu"
          style="overflow:auto"
          :infinite-scroll-delay="500"
          :infinite-scroll-distance="10"
          @select="handleSelect"
        >
          <template v-for="(item, key) in dealList">
            <el-menu-item :key="key" :item="item" :index="item.id">
              <el-image v-if="!isEmpty(item.logoInfo)" class="deal-icon-folder" :src="item.logoInfo" fit="fit" />
              <svg v-else t="1687777426484" class="icon deal-icon-folder" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8586" width="200" height="200"><path d="M975.47876 975.316l-926.738 0c-26.899 0-48.736-21.839-48.736-48.749l0-829.149c0-26.899 21.836-48.737 48.736-48.737l560.971 0 0 73.1-512.116 0c-13.558 0-24.479 10.917-24.479 24.372l0 731.676c0 13.456 10.921 24.362 24.479 24.362l829.043 0c13.55 0 24.483-10.905 24.483-24.362l0-463.364 73.108 0 0 512.102c0 26.911-21.839 48.749-48.752 48.749l0 0zM902.27376 292.499c-13.146 0-25.696-2.644-37.174-7.385l-422.006 422.012-4.085-4.192-4.194 4.192-142.256-142.26-117.764 117.777-52.606-52.595 166.847-166.847 3.632 3.632 3.643-3.632 142.698 142.698 373.392-373.404c-4.862-11.574-7.609-24.147-7.609-37.484 0-53.931 43.661-97.595 97.484-97.595 53.919 0 97.591 43.663 97.591 97.595 0.001 53.809-43.671 97.486-97.591 97.486l0 0z" fill="#bfbfbf" p-id="8587" /></svg>
              <span class="deal-name-item" :title="$t(item.dealName)">{{ $t(item.dealName) }}</span>
            </el-menu-item>
          </template>
        </el-menu>
        <div v-else>
          <div class="notDataList">
            <div class="noeDataListFirst">{{ $t('暂无数据') }}</div>
            <br>1.{{ $t('当前项目名称不存在, 请重试!') }}
            <br>2.{{ $t('项目视图仅支持项目类相关检索') }}
            <div class="noeDataListQuery" @click="filterText = ''; init()">
              {{ $t('重置查询') }}
            </div>
          </div>
        </div>
      </div>
      <p v-if="loading" class="loadingText">{{ $t('加载中') }}...</p>
      <p v-if="dealList.length >= total && total > 15" class="loadingText">{{ $t('没有更多了') }}</p>
    </div>
  </div>
</template>

<script>
import { listDataSelect } from '@/api/base/deal/dealBase'

export default {
  components: {},
  props: {
  },
  data() {
    return {
      // 遮盖层
      loading: false,
      activeBus: undefined,
      dealList: [],
      filterText: '',
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        dealName: ''
      },
      total: 0
    }
  },
  watch: {
    activeBusId: {
      handler(val) {
        this.handleSelect(val)
      },
      deep: true
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      // 获取所有项目
      this.loading = true
      this.queryParams.dealName = this.filterText
      listDataSelect(this.queryParams).then(response => {
        this.dealList = response.rows
        this.total = response.total
        this.loading = false
        // 加载第一个项目
        if (this.dealList.length > 0) {
          this.activeBus = this.dealList[0]
          this.handleSelect(this.activeBus.id)
        }
      })
    },
    load() {
      if (this.dealList.length < this.total) {
        this.loading = true
        this.queryParams.pageNum++
        listDataSelect(this.queryParams).then(response => {
          response.rows && response.rows.forEach(item => {
            this.dealList.push(item)
          })
          this.total = response.total
          this.loading = false
          // 加载第一个项目
          if (this.dealList.length > 0) {
            this.activeBus = this.dealList[0]
            this.$emit('getFolderBusViewId', this.activeBus.id)
          }
        })
      }
    },
    // 选中某个项目
    handleSelect(busId) {
      const dealBase = this.dealList.find(obj => obj.id === busId)
      if (dealBase) {
        console.log(dealBase)
        this.$route.query.id = dealBase.id
        this.$route.query.dealType = dealBase.dealType
        this.$parent.getLpType()
        this.$emit('getFolderBusViewId', dealBase.id)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.loadingText {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  color: #9b9b9b;
}
.folder-menu{
  /deep/.el-menu-item {
    display: flex;
    align-items: center;
    height: 30px;
    line-height: 30px;
    i {
     margin: 0;
    }
  }
}
.deal-name-item {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 20px);
}
.deal-icon-folder {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  margin-right: 5px;
  border: 1px solid #eee;
}
.notDataList {
  text-align: left;
  font-size: 13px;
  color: #6d6d6d;
  width: 87%;
  margin: auto;
  margin-top: 100%;
}
.noeDataListFirst {
  text-align: center;
  font-size: 14px;
  color: black;
}
.noeDataListQuery {
  text-align: center;
  font-size: 14px;
  color: #1890ff;
  margin-top: 30px;
  cursor: pointer;
}
</style>
